/*
 * @Author: liyongxuan
 * @Date: 2018-1-10 10:37:42
 * @description：项目管理-拟投资-打款信息组件编辑
 */
<template>
    <div>
        <div class="ca-title ca-m-b-20">
            <el-col :span="4" class="float-right">
                <el-button size="small" type="primary" @click="save">保存</el-button>
                <el-button size="small" @click="$emit('close')">取消</el-button>
            </el-col>
            <h3>打款信息</h3>
        </div>
        <el-form ref="dataForm">
            <table class="ca-table ca-m-t-15">
                <tr class="height-line">
                    <th width="15%">打款时间</th>
                    <th width="19%">打款人</th>
                    <th width="19%">打款金额</br>（万元）</th>
                    <th width="27%">收款账号</th>
                    <th width="15%">收款人</th>
                    <th width="5%" class="p-tb-0">
                        <button @click="addData()" type="button" class="ca-btn ca-btn-round">
                            <i class="fa fa-plus"></i>
                        </button>
                    </th>
                </tr>
                <tr v-for="(item,index) in resultDataList" :key="index">
                    <td width="8%">
                        <el-form-item class="ma-t-0">
                            <el-date-picker type="date" placeholder="选择日期" format="yyyy-MM-dd" v-model="item.playTime"></el-date-picker>
                        </el-form-item>
                    </td>
                    <td width="8%">
                        <el-form-item class="ma-t-0">
                            <el-input type="text" :maxlength="100" v-model="item.playUser"></el-input>
                        </el-form-item>
                    </td>
                    <td width="8%">
                        <el-form-item class="ma-t-0">
                            <el-input type="number" :maxlength="100" v-model="item.playMoney"></el-input>
                        </el-form-item>
                    </td>
                    <td width="8%">
                        <el-form-item class="ma-t-0">
                            <el-input type="text" :maxlength="100" v-model="item.accountNumber"></el-input>
                        </el-form-item>
                    </td>
                    <td width="8%">
                        <el-form-item class="ma-t-0">
                            <el-input type="text" :maxlength="100" v-model="item.receivablesUser"></el-input>
                        </el-form-item>
                    </td>
                    <td width="5%" class="p-tb-0">
                        <button @click="delData(index,item.id)" type="button" class="ca-btn ca-btn-round">
                            <i class="fa fa-times"></i>
                        </button>
                    </td>
                </tr>
            </table>
        </el-form>
    </div>
</template>

<script type="text/ecmascript-6">
    import { api } from '../../../api';
    import { apiHttp, STATUS_HTTP_SUCCESS } from '__service/csHttp';
    import { addRemind } from '__service/utils';
    export default {
        props: ['itemId','resultDataList','tabIndex'],
        methods: {
            // 保存打款信息
            async save() {
                if (this.check()) {
                    let query = [
                        ...this.resultDataList
                    ]
                    const {resCode} = await apiHttp(api.POST_FUND_PLAY, query)
                    if (resCode === STATUS_HTTP_SUCCESS) {
                        this.$message({type: 'success',message: '成功'})
                        // 添加小红点
                        await addRemind({
                            dataId: this.itemId || '', // 业务id
                            dataTab: this.tabIndex, // tab页顺序 head 也为0
                            dataType: 4, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                        });
                        // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                        this.$root.Dot.$emit('getDotList');
                        this.$emit('close')
                    }
                }
            },
            // 验证打款信息
            check() {
                let flag = true
                var reg = /^\d{1,10}(\.\d{1,10})?$/;
                if (this.resultDataList.length > 0) {
                    for (let item of this.resultDataList) {
                        if (item.playTime === '' || item.playTime === null) {
                            this.$message({type: 'error',message: '请填写打款时间',center: true})
                            flag = false
                            break
                        } else if (item.playUser === '') {
                            this.$message({type: 'error',message: '请填写打款人',center: true})
                            flag = false
                            break
                        } else if (item.playMoney !== '' && !reg.test(item.playMoney)) {
                            this.$message({type: 'error',message: '打款金额范围在小数点前10位,小数点后10位',center: true})
                            flag = false
                            break
                        }
                    }
                }
                return flag
            },
            // “+”按钮
            addData() {
                const newData = {
                    'fundId': this.itemId,
                    'id': '',
                    'accountNumber': '',
                    'receivablesUser': '',
                    'playMoney': '',
                    'playTime': new Date(),
                    'playUser': ''
                }
                this.resultDataList.push(Object.assign({}, newData))
            },
            // “×”按钮
            delData(index,id) {
                this.$confirm('是否退出', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning'
                }).then(() => {
                    apiHttp(api.DEL_FUND_PLAY,{id}).then(res => {
                        if (res.resCode === STATUS_HTTP_SUCCESS) {
                            this.$message({type: 'success',message: '成功'})
                            this.resultDataList.splice(index,1)
                        }
                    })
                })
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.float-right{
  float: right;
}
.ma-t-0{
  margin-bottom: 0;
}
.height-line{
    line-height: 30px
}
</style>
